<template>
  <div class="mall-navbar">
    <div class="nav-container">
      <!-- 左侧商城名称和主站链接 -->
      <div class="left-section">
        <el-icon class="icon"><Shop /></el-icon>
        <span class="mall-name">NB会员购商城</span>
        <span class="divider">|</span>
        <el-icon class="icon"><HomeFilled /></el-icon>
        <a href="/HomeView" class="main-site-link">主站</a>
      </div>

      <!-- 中间搜索框 -->
      <div class="middle-section">
        <el-input
          v-model="searchText"
          placeholder="搜索商品..."
          class="search-input"
          @keyup.enter="handleSearch"
        >
          <template #append>
            <el-button :icon="Search" @click="handleSearch" />
          </template>
        </el-input>
      </div>

      <!-- 右侧导航链接 -->
      <div class="right-section">
        <a
          v-for="(item, index) in navItems"
          :key="index"
          href="#"
          class="nav-link"
          :class="{ active: activeIndex === index }"
          @click="setActive(index)"
        >
          <el-icon class="nav-icon"><component :is="item.icon" /></el-icon>
          {{ item.name }}
        </a>

        <!-- 用户头像和下拉菜单 -->
        <el-dropdown class="user-dropdown">
          <div class="user-avatar">
            <el-avatar :size="32" :src="userInfo.avatar" />
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>
                <el-icon><User /></el-icon>个人中心
              </el-dropdown-item>
              <el-dropdown-item>
                <el-icon><List /></el-icon>订单中心
              </el-dropdown-item>
              <el-dropdown-item divided @click="handleLogout">
                <el-icon><SwitchButton /></el-icon>退出登录
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import  avatar_img from '@/assets/imgs/login/avator.png'
import {
  Shop,
  HomeFilled,
  Search,
  User,
  List,
  SwitchButton,
  Goods,
  ShoppingCart,
  Star,
  Tickets
} from '@element-plus/icons-vue';

const searchText = ref('');
const activeIndex = ref(0);

// 用户信息
const userInfo = ref({
  avatar: avatar_img
});

// 导航项数据（带图标）
const navItems = ref([
  { name: '首页', path: '/', icon: Goods },
  { name: '分类', path: '/category', icon: List },
  { name: '购物车', path: '/cart', icon: ShoppingCart },
  { name: '收藏', path: '/favorites', icon: Star },
  { name: '订单', path: '/orders', icon: Tickets }
]);

const setActive = (index) => {
  activeIndex.value = index;
  // 实际项目中这里应该跳转到对应路由
  // router.push(navItems.value[index].path);
};

const handleSearch = () => {
  console.log('搜索内容:', searchText.value);
  // 实际项目中这里应该执行搜索逻辑
};

const handleLogout = () => {
  console.log('用户退出登录');
  // 实际项目中这里应该执行退出登录逻辑
};
</script>

<style lang="scss" scoped>
.mall-navbar {
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 20px;

  .nav-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left-section {
      display: flex;
      align-items: center;
      gap: 12px;

      .icon {
        font-size: 18px;
        color: #f25d8e;
      }

      .mall-name {
        font-size: 20px;
        font-weight: bold;
        color: #333;
      }

      .divider {
        color: #ddd;
        margin: 0 8px;
      }

      .main-site-link {
        color: #666;
        text-decoration: none;
        font-size: 14px;
        transition: color 0.3s;

        &:hover {
          color: #f25d8e;
        }
      }
    }

    .middle-section {
      flex: 1;
      max-width: 500px;
      margin: 0 30px;

      .search-input {
        :deep(.el-input__wrapper) {
          border-radius: 20px;
          padding: 0 15px;
          box-shadow: 0 0 0 1px #eee inset;

          &:hover {
            box-shadow: 0 0 0 1px #f25d8e inset;
          }
        }

        :deep(.el-input-group__append) {
          background-color: #f25d8e;
          border: none;
          border-radius: 0 20px 20px 0;
          padding: 0 15px;

          .el-button {
            color: white;
          }
        }
      }
    }

    .right-section {
      display: flex;
      align-items: center;
      gap: 20px;

      .nav-link {
        display: flex;
        align-items: center;
        color: #666;
        text-decoration: none;
        font-size: 14px;
        transition: all 0.3s;
        position: relative;
        padding: 5px 0;
        gap: 5px;

        &:hover {
          color: #f25d8e;

          .nav-icon {
            color: #f25d8e;
          }
        }

        .nav-icon {
          font-size: 16px;
          transition: color 0.3s;
        }

        &.active {
          color: #f25d8e;
          font-weight: bold;

          .nav-icon {
            color: #f25d8e;
          }

          &::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: #f25d8e;
          }
        }
      }

      .user-dropdown {
        margin-left: 10px;
        cursor: pointer;

        .user-avatar {
          display: flex;
          align-items: center;
        }
      }
    }
  }
}
</style>
